<template>
  <div class="">
    <div>
      <div class="w-100 ib">parent</div>
      <el-select v-model="pvalue" @change="getParent" placeholder="parent data">
        <el-option
          v-for="item in parentOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <Son />
  </div>
</template>
 
<script>
import Son from './son'
import {mapActions, mapMutations, mapGetters, mapState} from 'vuex'
export default {
  name: 'mapModules',
  components: { Son },
  data () {
    return {
    }
  },
  computed: {
    // 四种 去store.state方法
    // 扩展mapState()
    ...mapState({
      options: state => state.modCellData.options,
      value: state => state.modCellData.value
    }),
    ...mapGetters({
      moptions: 'moptions', 
      mvalue: 'mvalue'
    }),
    parentOptions() {
      return this.$store.state.modCellData.options
    },
    // set can set store state
    pvalue: {
      get() {
        return this.mvalue
      },
      set(v) {
        this.$store.state.modCellData.value = v
      }
    }
  },
  mounted() {
    // console.log(this.options)
    // console.log(this.moptions, 11)
  },
  methods: {
    // 四种改变 store.state 方法
    // mapActions => 异步
    // ...mapActions('modCellData', ['changeOption']),
    // ...mapActions({
    //   changeOption: 'modCellData/changeOption'
    // }),
    // mapMutations => 同步
    // ...mapMutations('modCellData', ['SET_OPTION']),
    ...mapMutations({
      changeOption: 'modCellData/SET_OPTION'
    }),
    getParent(v) {
      // console.log(v)
      // 扩展 mapActions()
      // this.changeOption(v)
      // this.SET_OPTION(v)
      // this.$store.dispatch('cellData/changeOption', v)
    }
  }
}
</script>
 
<style scoped lang="scss">
 
</style>